<template>
  <div class="container" @click.stop>
    <ContextMenu
      class="block1"
      :menu="[
        { label: '添加' },
        { label: '编辑' },
        { label: '删除' },
        { label: '查看' },
        { label: '复制' },
      ]"
      @select="choose1 = $event.label"
    >
      <h2>{{ choose1 }}</h2>
    </ContextMenu>
    <ContextMenu
      class="block2"
      :menu="[
        { label: '员工' },
        { label: '部门' },
        { label: '角色' },
        { label: '权限' },
        { label: '菜单' },
      ]"
      @select="choose2 = $event.label"
    >
      <h2>{{ choose2 }}</h2>
      <ContextMenu
        class="block3"
        :menu="[
          { label: '菜单1' },
          { label: '菜单2' },
          { label: '菜单3' },
          { label: '菜单4' },
        ]"
        @select="choose3 = $event.label"
      >
        <h2>{{ choose3 }}</h2>
      </ContextMenu>
    </ContextMenu>
  </div>
</template>

<script setup>
import { ref } from "vue";
import ContextMenu  from "./ContextMenu.vue";
const choose1 = ref("");
const choose2 = ref("");
const choose3 = ref("");
</script>

<style lang="scss" scoped>
.container{
  height: 100vh;
  width: 100%;
  display: flex;
  & .block1{
    width: 50%;
    height: 100vh;
    background-color: lightblue;
  }
  & .block2{
    width: 50%;
    height: 100vh;
    background-color: lightgreen;
    margin-left: 30px;
  }
  & .block3{
    width: 200px;
    height: 200px;
    background-color: lightgrey;
  }
}
</style>
